<template>
  <div class="header_wrap">
    <el-row class="header_top">
      <el-col :span="24">
        <div v-if="isLogin">
          <nuxt-link to="/login" class='btnTEST'>登录</nuxt-link>
          <nuxt-link to="/register" class='btnTEST'>注册</nuxt-link>
        </div>
        <div v-else class="user_out">
          <span> 欢迎来到吉安12345 </span>
          <div>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link item_user">
                <span class="avater">aa来了</span><span><i class="el-icon-arrow-down el-icon--right"></i></span>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="exitsystem">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-col>

    </el-row>
    <div class='bannaer'>
      <img class='bannaer' src="~/assets/images/header.png" alt="">
    </div>
    <div class='nav'>
      <div :class="now===item.path?'active':''" @click="gotuRouter(item.path)" class='menu' v-for="(item,index) in menu" :key="item+index">{{item.title}}</div>
    </div>
  </div>
</template>
<script>
//import axios from 'axios'
export default {
  data() {
    return {
      isLogin: true,
      Time: null,
      now: '/',
      menu: [
        { title: '首页', path: '/' },
        { title: '12345概况', path: '/about' },
        { title: '新闻中心', path: '/news' },
        { title: '在线服务', path: '/service' },
        { title: '运行通报', path: '/tongbao' }],
    }
  },

  mounted() {

    if (window.sessionStorage.getItem('token')) {
      this.isLogin = false

    } else {
      this.isLogin = true
    }
    var d = new Date();
    var date = d.getFullYear() + "年" + (d.getMonth() + 1) + "月" + d.getDate() + "日";
    var d = new Date()
    var weekday = new Array(7)
    weekday[0] = "星期日"
    weekday[1] = "星期一"
    weekday[2] = "星期二"
    weekday[3] = "星期三"
    weekday[4] = "星期四"
    weekday[5] = "星期五"
    weekday[6] = "星期六"
    this.Time = "今天是:" + date + " "
    this.now = this.$route.path


    if (this.$route.path == '/detail/') {

      this.now = '/news'
    }
    // let url = ' https://i.tianqi.com/?c=code&a=getcode&id=35&h=55&w=200'
    // const link = document.createElement('a')
    // link.style.display = 'none'
    // link.href = url
    // document.body.appendChild(link)
    // link.click()
    // document.body.removeChild(link) 



  },
  methods: {
    gotuRouter(item) {
      this.$router.push(item)
      this.now = item;
      // localStorage.setItem('meun',item)
    },
    //退出登录
    exitsystem() {
      //   this.$emit('fnExit')
      console.log(11);
      sessionStorage.removeItem('token')
      this.isLogin = true
      this.$router.push({
        path: '/'
      })

    },


  },
  watch: {
    $route(to, from) {
      console.log(to.path);
      this.now = to.path
    }
  },
}
</script>
<style scoped lang="scss">
el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.header_wrap {
  width: 100%;
}
.header_top {
  height: 40px;
  padding-left: 30px;
  padding-right: 30px;
  line-height: 40px;
  overflow: hidden;
  .user_out {
    display: flex;
    justify-content: space-between;
    .item_user {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .avater {
      width: 40px;
      height: 30px;

      text-align: center;
      line-height: 30px;
      font-size: 12px;
      border-radius: 50%;
      background-color: #eee;
      overflow: hidden;
      border: 1px solid #fff;
    }
  }
}
.active {
  background: #f32424;
}
.menu {
  cursor: pointer;
  /* border:1px solid #fff; */
  line-height: 42px;
  width: 171px;
  margin: 0 auto;
  display: inline-block;
  transition: 0.3s;
}
.menu:hover {
  background: #f32424;
}
.btns {
  margin-left: 50px;
}
.btnss {
  text-align: right;
}

.btnTEST {
  color: black;
}
.bannaer {
  height: 250px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
.nav {
  width: 100%;
  height: 42px;
  margin: 0 auto;
  background: #ca2222;
  text-align: center;
  color: aliceblue;
}
</style>
